<!DOCTYPE html>
<html>
	<head>
		<title>Wikipedia Style - Grey Lady III - Options Page</title>
		<link rel="icon" type="image/png" href="images/icon_18x18.png">
		<link rel="stylesheet" href="styles/options.css">
	</head>
	<body onload="onload();">
		<div id="wrapper" class="drop-shadow lifted">
			<h1>Wikipedia Style - Grey Lady III - Preferences</h1>
			<form>
				<div class="contentblock">
					<table>
						<tr>
							<td>List of site on which the Grey Lady III style will be applied</td>
							<td align="right" valign="bottom"><button type="button" onclick="javascript:resetDefaultLinks();">Reset this list to Default</button></td>
						</tr>
					</table>
				</div>
				
				<div class="contentblock" id="currLinks"></div>

				<div class="contentblock" id="addnew">
					Add a new site to the list
					<input type="links" id="links" />
					<button type="button" onclick="javascript:addSites();">Add</button><br/>					
				</div>
			</form>

		</div>

		<script>

			function onload(){
				rewritelinks();
			}

			function addSites(){
				links = document.getElementById( 'links' );
				var newSite = links.value.trim();
				if (newSite.length > 0) {
					var effectivesites =  widget.preferences.getItem('effectivesites');

					if (effectivesites.trim().length > 0) {
						
						var match = false;
						var effectivesitesArr=effectivesites.split("|");
						for(var i=0;i<effectivesitesArr.length;i++){
							if (newSite.match("^"+effectivesitesArr[i]+"$")) {
								match = true;
							}
						}
						
						if (match) {
							alert('This sites is already in the list.');
						} else {
							widget.preferences.setItem('effectivesites',effectivesites+'|'+newSite);
						}
						
					} else {
						widget.preferences.setItem('effectivesites',newSite);
					}

					links.value='';
					rewritelinks();
				}
			}

			function deleteSite(index){			
				if (confirm("Confirm delete?")){
					var effectivesites =  widget.preferences.getItem('effectivesites');
					var effectivesitesArr=effectivesites.split("|");			
					effectivesitesArr.splice(index,1);	

					var tempStr = "";
					//alert(effectivesitesArr.length);
					if (effectivesitesArr.length > 0) {
						tempStr = effectivesitesArr[0];
						for(var i=1;i<effectivesitesArr.length;i++){
							tempStr = tempStr + "|" + effectivesitesArr[i];
						}
					} 
					
					widget.preferences.setItem('effectivesites',tempStr);
					rewritelinks();
				}
			}
			
			function resetDefaultLinks(){
				if (confirm("Default effective sites includes wikipedia, wikibooks, wikiquote, wikisource, wikiversity, wiktionary and wikimedia.org. Are you sure to reset?")){
					var effectivesitesdefault = "wikipedia.org|wikibooks.org|wikiquote.org|wikisource.org|wikiversity.org|wiktionary.org|wikimedia.org|secure.wikimedia.org";
					widget.preferences.setItem('effectivesites',effectivesitesdefault);
				}
				rewritelinks();
			}

			function onload(){
				rewritelinks();
			}

			function rewritelinks(){
				var effectivesites =  widget.preferences.getItem('effectivesites');
				var content='';
				if (effectivesites.trim().length > 0) {
				var effectivesitesArr=effectivesites.split("|");
				
				for(var i=0;i<effectivesitesArr.length;i++){
				
					content = content + "<button type=\"button\" onclick=\"javascript:deleteSite("+i+");\">Delete</button>&nbsp;" + effectivesitesArr[i]+"<br>";
					//document.write(effectivesitesArr[i]+"<br>");
				}
				
				}
				currLinks.innerHTML=content;
			}

		</script>
	</body>
</html>